import {
  useReactFlow,
  BaseEdge,
  getStraightPath,
  EdgeLabelRenderer,
} from "@xyflow/react";

/**
 * getBezierPath
 * getSimpleBezierPath
 * getSmoothStepPath
 * getStraightPath
 * @param {*} param0
 * @returns
 */
export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const { setEdges } = useReactFlow();
  const [edgePath, labelX, labelY] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
  const handleDeleteEdge = () => {
    setEdges((es) => es.filter((e) => e.id !== id));
  };
  return (
    <>
      <BaseEdge id={id} path={edgePath} />;
      <EdgeLabelRenderer>
        <button
          style={{
            position: "absolute",
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: "all",
          }}
          className="nodrag nopan"
          onClick={handleDeleteEdge}
        >
          delete
        </button>
      </EdgeLabelRenderer>
    </>
  );
}
